<script setup>
import { useUserStore } from "@/store/modules/user";
import {useAppStore} from "@/store/modules/app.js";
import * as api from "@/api/v-file-service/file-manage"
import { downloadFile, blobToBase64 } from "@/utils/index.js"

/**
 * 定义emit事件
 */
const emits = defineEmits([
  'update:modelValue',
  'callBack',
])
/**
 * 定义props 属性
 */
const props = defineProps({
  modelValue: {
    type: Object,
    default: () => {}
  },
  option: {
    type: Object,
    default: () => {
      return {
        fileName: '',
        fileValue: '',
      }
    }
  },
})

/**
 * 接收未使用的属性
 */
const $attrs = useAttrs()

const userStore = useUserStore()

const appStore = useAppStore()

/**
 * 文件列表
 */
const fileList = ref([])

const baseApi = ref(import.meta.env.VITE_APP_BASE_API)

const form = computed(
    {
      get(){
        return props.modelValue
      },
      set(val){
        emits('update:modelValue',val)
      }
    }
)

const option = computed(() => props.option)

watch(
    form,
    (val) =>{
      if (val){
        const obj = {}
        if (val[option.value.fileName]) obj.name = val[option.value.fileName]
        if (val[option.value.fileValue]) obj.value = val[option.value.fileValue]
        if (Object.keys(obj).length !== 0) fileList.value.push(obj)
      }
    },
    {
      immediate: true,
      deep: true,
    }
)

/**
 * 文件上传成功回调
 * @param res
 * @param uploadFile
 * @param uploadFiles
 */
const onSuccess = async (res, uploadFile, uploadFiles) => {
  if (res.code === 200) {
    if (res.data && res.data.id) {
      form.value[option.value.fileValue] = res.data.id
      form.value[option.value.fileName] = res.data.name
    } else {
      form.value = res.data
    }
    // 文件转base64 ElasticSearch后台可抽取文档内容
    const base64 = await blobToBase64(uploadFile.raw)
    console.log(base64)
    emits('callBack', form.value, uploadFile)
  }
}

/**
 * 文件删除回调
 * @param uploadFile
 * @param uploadFiles
 */
const onRemove = (uploadFile, uploadFiles) => {
  fileList.value = uploadFiles
  form.value[option.value.fileName] = ''
  form.value[option.value.fileValue] = ''
  emits('callBack',form.value, uploadFile)
}

const onExceed = (files, uploadFiles) => {
  console.log(files,uploadFiles)
}

/**
 * 文件下载回调
 */
const onPreview = async () => {
  if (form.value[option.value.fileValue]){
    const res = await api.download(form.value[option.value.fileValue])
    downloadFile(res)
  }
}


</script>

<template>
  <el-upload
      class="v-upload"
      :action="baseApi + '/cloud-file-service/file-manage/upload'"
      :headers="{ Authorization: userStore.token, 'Priority-Value': appStore.groupName }"
      v-bind="Object.assign($attrs)"
      :file-list="fileList"
      :on-success="onSuccess"
      :on-remove="onRemove"
      :on-exceed="onExceed"
      :on-preview="onPreview"
  >
    <el-button type="primary" v-if="fileList.length === 0">文件上传</el-button>
  </el-upload>
</template>

<style scoped lang="scss">
.v-upload {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
</style>